<!--  -->
<template>
    <div style="width:100%;height:100%;">
        <div class="container">
            <p>hahaha哈哈</p>
            <p>hahaha哈哈</p>
            <p>hahaha哈哈</p>
            <p>hahaha哈哈</p>
            <p>hahaha哈哈</p>
            <p>hahaha哈哈</p>
        </div>
        <div>
            <div>
                <input type="file" id="file1" accept="*" />
                <div>进度：<progress id="pro" value="0"></progress></div>
            </div>
            <div id="result"></div>
        </div>
    </div>
</template>

<script>
import * as d3 from 'd3';

export default {
    inheritAttrs: false,
    props: {},
    data() {
        return {};
    },
    components: {},
    computed: {},
    created() {},
    mounted() {
        this.initSvg();
        this.getData();
    },
    methods: {
        initSvg() {
            d3.selectAll('p').style('color', function() {
                return 'hsl(' + Math.random() * 360 + ',100%,50%)';
            });
        },

        getData() {
            // 读取本地excel文件
            var file1 = document.getElementById('file1');
            file1.onchange = function() {
                var file = file1.files[0];
                //读取为二进制
                var reader = new FileReader();
                reader.readAsText(file, 'utf-8');
                //显示进度
                var pro = document.getElementById('pro');
                pro.max = file.size;
                reader.onprogress = function(e) {
                    pro.value = e.loaded;
                };

                reader.onload = function() {
                    var str = reader.result;
                    var rows = str.split('\n');

                    var clients = [];
                    for (var i = 0; i < rows.length; i++) {
                        var row = rows[i].split(',');
                        var client = {
                            id: row[0],
                            company: row[1],
                            address: row[2],
                            name: row[3],
                            phone: row[4],
                            coord: { x: row[5], y: row[6] },
                        };
                        clients.push(client);
                    }
                    //由对象转为JSON字符串
                    console.log(clients);
                    document.getElementById('result').innerHTML = JSON.stringify(clients);
                };
            };
        },
    },
};
</script>
<style lang="scss" scoped>
.container {
    width: 800px;
    height: 600px;
    border: 1px solid #ccc;
    margin: 0 auto;
}
</style>
